import React, {Component} from 'react';
import {View, Text, StyleSheet, TextInput, TouchableOpacity, ToastAndroid} from 'react-native';
import {toLogin} from '../../api';
// import {NavigationEvents} from 'react-navigation';
import Entypo from 'react-native-vector-icons/Entypo';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import Storage from '../../deviceStorage/index';
import navigationUtil from '../../routers/utils/navigation';

class Login extends Component {
  state = {
    username: '',
    pwd: '',
  };
  // 用户名更改
  onUsernameChanged = newUsername => {
    this.setState({
      username: newUsername,
    });
  };
  // 密码更改
  onPasswordChanged = newPassword => {
    this.setState({
      pwd: newPassword,
    });
  };
  // 点击登录
  login = () => {
    this.state.username && this.state.pwd ? this.loginAction() : ToastAndroid.showWithGravity('用户名和密码不能为空...', ToastAndroid.SHORT, ToastAndroid.TOP);
  };
  // 登录的逻辑处理
  loginAction = () => {
    // 登陆接口的处理
    const {username, pwd} = this.state;
    console.log(username, pwd);
    // ajax 获取数据  建立 AsyncStorage
    toLogin(username, pwd)
      .then(res => {
        toLogin(username, pwd).then(res => {
          Storage.save('token', res.data.token.access_token);
          Storage.save('jurisdiction', JSON.stringify(res.data.permission));
          // 登录成功后
          this.props.navigation.navigate('Main');
          // navigationUtil.reset(this.props.navigation, 'Main');
        });
      })
      .catch(err => {
        console.log(err);
      });
  };

  // componentDidMount(): void {
  //   this.willFocusSubscription = this.props.navigation.addListener(
  //     'willFocus',
  //     async payload => {
  //       await Storage.get('token').then(isToken => {
  //         if (isToken) {
  //           this.props.navigation.navigate('Main');
  //         }
  //       });
  //     },
  //   );
  // }
  //
  // componentWillUnmount(): void {
  //   this.willFocusSubscription.remove();
  // }

  render() {
    return (
      <View style={styles.container}>
        {/*<NavigationEvents />*/}
        <View style={styles.inputBox}>
          <Entypo name={'users'} size={22} color={'#fff'}/>
          <TextInput
            style={styles.input}
            placeholder={'用户名'}
            onChangeText={this.onUsernameChanged}
            placeholderTextColor={'#fff'}
            underlineColorAndroid={'transparent'}
          />
        </View>
        <View style={styles.inputBox}>
          <MaterialCommunityIcons name={'textbox-password'} size={22} color={'#fff'}/>
          <TextInput
            placeholder={'密码'}
            secureTextEntry={true}
            style={styles.input}
            onChangeText={this.onPasswordChanged}
            placeholderTextColor={'#fff'}
            underlineColorAndroid={'transparent'}
          />
        </View>
        <TouchableOpacity style={styles.button} onPress={this.login}>
          <Text style={styles.btText}>登录</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  img: {
    width: 30,
    height: 30,
  },
  input: {
    paddingLeft: 20,
    width: 200,
    height: 40,
    color: '#fff',
  },
  inputBox: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    width: 280,
    height: 50,
    borderRadius: 8,
    backgroundColor: '#53CAC4',
    marginBottom: 8,
  },
  button: {
    height: 50,
    width: 280,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 8,
    backgroundColor: '#53CAC4',
    marginBottom: 8,
  },
  btText: {
    color: '#fff',
  },
});
export default Login;
